<template>
  <div :class="['uploadFile-con', conClass].join(' ')">

    <div id="card1" class="upload-card-con " v-if="getShowCard('card1')">
      <div class="upload-card" ref="upload-card">
        <div class="upload" :style="{ cursor: config_.readonly ? 'not-allowed' : '' }">
          <div class="showPic" v-if="fileListLoading.card1.card">
            <div v-if="!config_.readonly" class="delete" @click="deleteEvent('card1', fileList1['card1'])">
              <a-icon type="close" />
            </div>
            <template v-if="typeSorting(fileList1['card1'].url || '', 'card1', fileList1['card1'].suffix)">
              <div class="showModel"
                @click="picModalShow(fileList1['card1'].url, fileList1['card1'].suffix, fileList1['card1'])"></div>
              <img class="img-show" @load="imgLoadEvent('card1')" :src="fileList1['card1'].url || ''" alt="" v-if="fileListShowImg['card1']"/>
            </template>

            <span
              :class="['iconfont icon-size', getFielIcon(fileList1['card1'].url || '', '1', fileList1['card1'].suffix,fileListOld['card1'])]"
              v-if="typeSorting(fileList1['card1'].url || '', 'card1', fileList1['card1'].suffix)"></span>
              <!-- ************************************文件名称********************************************************* -->
            <div class="file-title-name"
              v-if="typeSorting(fileList1['card1'].url || '', 'card1', fileList1['card1'].suffix)"
              @click="picModalShow(fileList1['card1'].url, fileList1['card1'].suffix, fileList1['card1'])"
              >{{showTitle(fileListOld['card1'].url)}}</div>
            <!-- <span v-else>请检查输入的数据是否与配置一致【fielConfig.type】</span> -->

            <!-- style="cursor: pointer;" -->
            <a-icon type="loading"
              v-if="fileListLoading.card1.loading && !typeSorting(fileList1['card1'].url || '', 'card1', fileList1['card1'].suffix)" />
          </div>
          <a-upload :multiple="false" :disabled="config_.readonly" ref="card1"
            :customRequest="(action) => customRequestEvent(action, 'card1')"
            :beforeUpload="(...args) => { beforeUploadEvent('card1', ...args) }" list-type="picture"
            :defaultFileList="fileList['card1']">
            <!-- :file-list="fileList1['card1']" -->
            <!-- :default-file-list="fileList['card1']" -->
            <!-- @change="(...info) => handleChange( '1',...info)" -->
            <a-button>
              <a-icon type="upload" />
            </a-button>
          </a-upload>

        </div>
        <div class="upload-tips-con">{{
          config_.upLoadCardListConfig[0] && config_.upLoadCardListConfig[0].tips ||
          '点击按钮上传文件'
        }}</div>
      </div>
      <div
        :class="['upload-tips-con upload-tips-con-hide animate__animated', cardTipsConfig.cardName === 'card1' ? cardTipsConfig.class : ''].join(' ')">
        {{ cardTipsConfig.cardName === 'card1' ? cardTipsConfig.mesg : '' }}</div>
    </div>

    <div id="card2" class="upload-card-con" v-if="getShowCard('card2')">
      <div class="upload-card" ref="upload-card">
        <div class="upload" :style="{ cursor: config_.readonly ? 'not-allowed' : '' }">
          <div class="showPic" v-if="fileListLoading.card2.card">
            <div v-if="!config_.readonly" class="delete" @click="deleteEvent('card2', fileList1['card2'])">
              <a-icon type="close" />
            </div>
            <!-- <div class="showModel" @click="picModalShow(fileList1['card2'].url)"></div>
            <img class="img-show" :src="fileList1['card2'].url || ''" alt="" /> -->

            <template v-if="typeSorting(fileList1['card2'].url || '', 'card2', fileList1['card2'].suffix)">
              <div class="showModel"
                @click="picModalShow(fileList1['card2'].url, fileList1['card2'].suffix, fileList1['card2'])"></div>
              <img class="img-show" @load="imgLoadEvent('card2')" :src="fileList1['card2'].url || ''" alt=""  v-if="fileListShowImg['card2']"/>
            </template>
            <span
              :class="['iconfont icon-size', getFielIcon(fileList1['card2'].url || '', '1', fileList1['card2'].suffix,fileListOld['card2'])]"
              v-if="typeSorting(fileList1['card2'].url || '', 'card2', fileList1['card2'].suffix)"></span>
              <!-- ************************************文件名称********************************************************* -->
            <div class="file-title-name"
              v-if="typeSorting(fileList1['card2'].url || '', 'card2', fileList1['card2'].suffix)"
              @click="picModalShow(fileList1['card2'].url, fileList1['card2'].suffix, fileList1['card2'])"
              >{{showTitle(fileListOld['card2'].url)}}</div>
            <!-- <span v-else>请检查输入的数据是否与配置一致【fielConfig.type】</span> -->
            <!-- style="cursor: pointer;" -->
            <a-icon type="loading"
              v-if="fileListLoading.card2.loading && !typeSorting(fileList1['card2'].url || '', 'card2', fileList1['card2'].suffix)" />
          </div>
          <a-upload :multiple="false" :disabled="config_.readonly" ref="card2"
            :customRequest="(action) => customRequestEvent(action, 'card2')"
            :beforeUpload="(...args) => { beforeUploadEvent('card2', ...args) }" list-type="picture"
            :default-file-List="fileList['card2']">
            <a-button>
              <a-icon type="upload" />
            </a-button>
          </a-upload>
        </div>
        <div class="upload-tips-con">{{
          config_.upLoadCardListConfig[1] && config_.upLoadCardListConfig[1].tips ||
          '点击按钮上传文件'
        }}</div>
      </div>
      <div
        :class="['upload-tips-con upload-tips-con-hide animate__animated', cardTipsConfig.cardName === 'card2' ? cardTipsConfig.class : ''].join(' ')">
        {{ cardTipsConfig.cardName === 'card2' ? cardTipsConfig.mesg : '' }}</div>
    </div>

    <!-- @change="(...info) => handleChange( '1',...info)" -->
    <div id="card3" class="upload-card-con" v-if="getShowCard('card3')">
      <div class="upload-card-list-con">
        <div class="upload-card" ref="upload-card">
          <div class="upload" :style="{ cursor: config_.readonly ? 'not-allowed' : '' }">
            <div class="showPic" v-if="fileListLoading.card3.loading">
              <div v-if="!config_.readonly" class="delete" @click="() => { fileListLoading.card3.loading = false }">
                <a-icon type="close" />
              </div>

              <!-- style="cursor: pointer;" -->
              <a-icon type="loading" v-if="fileListLoading.card3.loading" />
            </div>
            <a-upload ref="card3" :multiple="true" :disabled="config_.readonly"
              :customRequest="(action) => customRequestEvent(action, 'card3')"
              :beforeUpload="(...args) => { beforeUploadEvent('card3', ...args) }" list-type="picture"
              :defaultFileList="fileList['card3']">
              <a-button>
                <a-icon type="upload" />
              </a-button>
            </a-upload>
          </div>
          <div class="upload-tips-con">{{
            config_.upLoadCardListConfig[2] && config_.upLoadCardListConfig[2].tips ||
            '点击按钮上传文件'
          }}</div>
        </div>
        <div class="upload-card-list">
          <ul>
            <li :key="'file-list-' + index" v-for="(item, index) in fileList1['card3']">
              <div class="icon">
                <!-- <a-icon type="unordered-list" /> -->
                <span :class="['iconfont', getFielIcon(item.url || '', 'all', fileList1['card3'].suffix,fileListOld['card3'][index])]"></span>
              </div>
              <div class="file-name" :title="getFileListName(item.name)"
                @click="picModalShow(item.url, item.suffix, item)">
                {{ getFileListName(item.name) }}</div>
              <div v-if="!config_.readonly" class="file-action" @click="deleteEvent('card3', item, index)">
                <a-icon type="close" />
              </div>
            </li>
            <!-- <a-icon type="loading" v-if="fileListLoading.card3.loading"/> -->
            <div v-if="fileList1['card3'].length === 0" class="not-data">暂无数据</div>
          </ul>
        </div>
      </div>
      <div
        :class="['upload-tips-con upload-tips-con-hide animate__animated', cardTipsConfig.cardName === 'card3' ? cardTipsConfig.class : ''].join(' ')">
        {{ cardTipsConfig.cardName === 'card3' ? cardTipsConfig.mesg : '' }}</div>
    </div>


    <!--预览图片-->
    <PreviewShow :config="{ visible: picModalConfig.visible }" :url="picModalConfig.picUrl" :name="picModalConfig.name"
      :event="psEvent" :suffix="picModalConfig.suffix">
    </PreviewShow>
  </div>
</template>

<script>
import { customRequestNew, customRequest } from '@/common/newUpload'
import FileType from './utils/fileType'
export default {
  name: 'UpLoadFile',
  props: {
    config: { type: Object, default: () => null },
    // 当有文件发生变化时调用的事件
    fileChangeEvent: { type: Function },
    // 获取过程数据事件
    ProcessEvent: { type: Function },
    value: { type: Object }
  },
  data() {
    return {
      conClass: '',
      fileListLoading: {
        card3: {
          loading: false,
          card: false,
        },
        card2: {
          loading: false,
          card: false,
        },
        card1: {
          loading: false,
          card: false,
        },
      },
      fileListShowImg: {
        card3: true,
        card2: true,
        card1: true
      },
      fileList: {
        card3: [],
        card2: [],
        card1: []
      },
      fileList1: {
        card3: [],
        card2: {},
        card1: {}
      },
      fileListOld: {
        card3: [],
        card2: {},
        card1: {}
      },
      config_: {
        readonly: false,  // 用于标记是否是可编辑的 此参数可选   默认值 false 表示可编辑   true 表示只读，不可编辑
        dir: '', // 上传文件的地址
        required: false, // 文件上传必填校验 默认为false 不校验   当值为true时进行强制校验
        multiple: false, // 优先级高于isTwo  开启多文件上传  默认值为false   当值为true时表示开启对文件上传，同时 isTwo 和 upLoadCardListConfig 失效
        isTwo: false, // 是否开启两个卡片上传 默认为false  表示只启用单个卡片单文件上传   true 表示开启两个卡片的单文件上传
        isThree: false, // 可用于开启三个卡片 默认值为false 表示不开启三个卡片  当值为true时表示开启  此属性开启之后 multiple 和  isTwo 将失效
        showCardList: [],
        upLoadCardListConfig: [{ type: '1', tips: '身份证人像面', fileInfo: { name: '', url: '' } }, { type: '1', tips: '身份证国徽面', fileInfo: { name: '', url: '' } }], // 此项最多可以传两组值 {type:'1',tips:'身份证人像面',backgroundPic:''},
        fielConfig: {
          type: '', // 允许上传的文件类型 当为空时表示不限制  默认为空   可供选择类型： 图片  文档  压缩包  发票
          size: 1, // 允许上传的文件个数  默认值为1
          singleFileSize: 1, //上传的单个文件大小 单位为 MB  默认值为1
        }
      },
      picModalConfig: {
        visible: false,
        picUrl: '',
        suffix: '',
        name: ''
      },
      cardTipsConfig: {
        cardName: '',
        class: '', // err-mesg animate__shakeX
        mesg: ''
      },
      uploadFileCheck: {},
      showCardNameArr: [],// 表示当前需要显示的card
      conW: 400,
    }
  },
  watch: {
    config: {
      handler(val) {
        if (Object.prototype.toString.call(val) === '[object Object]') {
          const showErrMsgArr = []
          Object.keys(val).forEach(key => {
            if (key === 'dir') {
              if (!val[key] || val[key] === '' || val[key].length === 0) {
                showErrMsgArr.push('在组件UpLoadFiel中，参数dir的值不能为空')
              }
            }
            this.config_[key] = val[key]
            if (key === 'upLoadCardListConfig') {
              this.setFileList(val)
            }
          })
          if (showErrMsgArr.length > 0) {
            console.error(showErrMsgArr.join());
          }

        }
      },
      deep: true,
      immediate: true
    },
    "fileList1": {
      handler(val) {
        // 、、 fileList1
        const res = []
        const getConfigData = (name, url) => {
          const resArr = []
          this.config.upLoadCardListConfig.forEach(item => {
            const { fileInfo } = item
            if (fileInfo && name == fileInfo.name && url == fileInfo.url) {
              resArr.push(item)
            }
          })
          return resArr
        }

        const tempFun = (data) => {
          const res = []
          //  { type: '1', tips: '登记注册身份验证App验证成功截图', fileInfo: { name: '', url: '' } },
          const dataType = Object.prototype.toString.call(data)
          if (dataType === '[object Object]') {
            if (Object.keys(data).length > 0 && data.url && data.url.length > 0) {
              res.push({ fileInfo: { name: data.name, url: data.url } })
            }
          }
          if (dataType === '[object Array]') {
            data.forEach(item => {
              const { suffix, name, url } = item
              if (!suffix) {
                res.push({ fileInfo: { name, url } })
              } else {
                res.push(...getConfigData(name, url))
              }
            })
          }
          return res
        }
        if (this.getShowCard('card1')) {
          const ca1 = tempFun(val.card1)
          if (ca1.length > 0) {
            res.push(...ca1)
          } else {
            res[0] = null
          }
        }
        if (this.getShowCard('card2')) {
          const ca2 = tempFun(val.card2)
          if (ca2.length > 0) {
            res.push(...ca2)
          } else {
            res[1] = null
          }
        }
        if (this.getShowCard('card3')) {
          const ca3 = tempFun(val.card3)
          if (ca3.length > 0) {
            res.push(...ca3)
          }
        }

        this.onChange(this.fileListOld)
        this.ProcessEvent && this.ProcessEvent(res)
      },
      deep: true,
      immediate: true
    },
    "fileList1.card1": {
      handler(val) {
        if (Object.prototype.toString.call(this.fileChangeEvent) === '[object Function]') {
          const size = this.$refs['card1'] && this.$refs['card1'].sFileList.length
          if (size > 0) {
            // this.fileListOld['card1'] = { name: val.name, suffix: FileType.getFileSuffix(val.url), url: val.url}
            this.fileChangeEvent('card1', this.fileListOld['card1'])
            this.setShowImg('card1')
          }
        }
      },
      deep: true,
      // immediate: true
    },
    "fileList1.card2": {
      handler(val) {
        // console.log("fileList1.card1===》",val);
        if (Object.prototype.toString.call(this.fileChangeEvent) === '[object Function]') {
          const size = this.$refs['card2'] && this.$refs['card2'].sFileList.length
          if (size > 0) {
            // this.fileListOld['card2'] = { name: val.name, suffix: FileType.getFileSuffix(val.url), url: val.url}
            this.fileChangeEvent('card2', this.fileListOld['card2'])
            this.setShowImg('card2')
          }
        }
      },
      deep: true,
      // immediate: true
    },
    "fileList1.card3": {
      handler(val) {
        // console.log("fileList1.card1===》",val);
        if (Object.prototype.toString.call(this.fileChangeEvent) === '[object Function]') {
          const size = this.$refs['card3'] && this.$refs['card3'].sFileList.length || 0
          if (size > 0) {
            this.fileChangeEvent('card3', this.fileListOld['card3'])
          }
        }
        this.fileListLoading['card3'].loading = false
      },
      deep: true,
      // immediate: true
    },
  },
  updated() {
    const conW = this.$refs['upload-card'] && this.$refs['upload-card'][0] && this.$refs['upload-card'][0].clientWidth
    localStorage.setItem('upload-card', conW)

  },
  methods: {
    setShowImg(cardName){
      const getFileSuffix = (url) => {
        const urlArr = url.split('.')
        return urlArr[urlArr.length-1]
      }
      if(cardName !== 'card3'){
        const SuffixImg = ['jpg', 'png', 'jpeg']
        const tempUrl = this.fileListOld[cardName].url
        const Suffix = getFileSuffix(tempUrl)
        if(SuffixImg.indexOf(Suffix)>=0){
          this.fileListShowImg[cardName]= true
        }else {
          this.fileListShowImg[cardName]= false
        }
        // console.log('@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@',cardName,Suffix,SuffixImg.indexOf(Suffix)>=0);
      }

    },
    getFileName(url) {
      return url.replace(/(.*\/)*([^.]+).*/ig, "$2")
    },
    showTitle(url) {
      if(!url){
        return ''
      }
      const title = this.getFileName(url) +'.'+ url.split('.').at(-1)
      // console.log('showTitle===>',title);
      const w_ = localStorage.getItem('upload-card')
      if (w_ && w_ != 'undefined') {
        this.conW = ~~w_
      }
      // const conW =document.getElementsByClassName('img-box')[0].clientWidth
      let tempTitle = title
      const conW = this.conW  // this.$refs['img-box'][0].clientWidth || 198
      const titleInfoArr = title.split('.')
      const titleInfoArrLength = titleInfoArr.length
      const names = [...titleInfoArr]
      names.pop()
      let newName = names.join('.')
      const nameLength = newName.length * 12
      const hzLength =  titleInfoArr[titleInfoArrLength-1].length * 6
      const baseLength = conW - hzLength - 30
      const subEndNum = baseLength / 12
      if (baseLength <= nameLength) {
        newName = names.join('.').substring(0, subEndNum) + '...'
      }
      tempTitle = newName + "." + titleInfoArr[titleInfoArrLength-1]
      // console.log('showTitle*******************', conW, nameLength, baseLength, newName,subEndNum,titleInfoArr);
      return tempTitle
    },
    onChange(value) {
      // console.log('UpLoadFile   onChange == >', value);
      this.$emit('change.value', value)
      this.$emit('change', value);
      this.$emit('input', value);
    },
    imgLoadEvent(cardName) {
      this.fileListLoading[cardName].loading = false
    },
    getFielIcon(url, type, ...args) {
      let suffix = args[0]
      const ttt = args[1]
      if(!suffix){
        const url = ttt &&ttt.url && ttt.url.split('.')
        suffix=ttt && ttt.suffix ||  url && url[url.length-1] || ''
      }
      return FileType.getFielIcon(url, type, suffix)
    },
    typeSorting(url, cardName, suffix) {
      // 'jpg', 'png', 'jpeg'
      let res = true
      const tempFileType = FileType.getFileSuffix(url)
      const fileType = this.config_.fielConfig.type
      res = FileType.getFileGroupName(suffix || tempFileType, fileType, cardName)
      // console.log('typeSorting=====》', res, tempFileType, url);
      return res
    },
    async addWatermark(config) {
      const { upLoadCardListConfig, ...args } = config
      // { type: '1', tips: '身份证人像面', fileInfo: { name: '', url: '' } }
      //['jpg', 'png', 'jpeg','pdf']

      const picFun = async (url) => {
        const tempBase = await this.AddWatermark.Watermark.adddWatermark(url)
        const url_ = this.AddWatermark.Watermark.base64Img2Blob(tempBase, window)
        return url_
        // return {url:url_,base64:tempBase}
      }

      const SuffixList = {
        'jpg': picFun,
        'png': picFun,
        'jpeg': picFun,
        "pdf": async (url) => {
          const url_ = await this.AddWatermark.WaterMark2PDF.addPDFWaterMark(url)
          return url_
        }
      }
      const tempArr = []
      for (let index = 0; index < upLoadCardListConfig.length; index++) {
        const item = upLoadCardListConfig[index];
        const { fileInfo, ...arg } = item
        const tempFileType = FileType.getFileSuffix(fileInfo.url)
        if (SuffixList[tempFileType]) {
          const url = await SuffixList[tempFileType](fileInfo.url)
          tempArr.push({ ...arg, fileInfo: { name: fileInfo.name, url, suffix: tempFileType } })
        } else {
          tempArr.push({ ...item, suffix: tempFileType })
        }
      }
      // console.log('addWatermark===>', tempArr);
      return { upLoadCardListConfig: tempArr, ...args }
    },



    setFileList(config) {
      // const {upLoadCardListConfig} = await this.addWatermark(config)
      // const { upLoadCardListConfig } = config
      const tempCardNameList = []
      const tempCardName = ['card1', 'card2', 'card3']
      const tempFileDataArr = config.upLoadCardListConfig
      const tempAtt = []
      tempCardName.forEach((cardName, index) => {
        const isshow = this.getShowCard(cardName)
        if (isshow === true) {
          tempCardNameList.push(cardName)
          if (cardName === 'card1') {
            tempAtt.push(1)
          }
          if (cardName === 'card2') {
            tempAtt.push(2)
          }
          if (cardName === 'card3') {
            tempAtt.push(3)
          }
        }
      })
      this.showCardNameArr = tempCardNameList

      const getFileSuffix = (url) => {
        const urlArr = url.split('.')
        return urlArr[urlArr.length-1]
      }

      const tempFun = {
        1: {
          1: () => {
            this.deleteEvent('card1',{},0)
            const tempFile = tempFileDataArr[0] // fileInfo
            if (tempFile && tempFile.fileInfo && tempFile.fileInfo.url) {
              this.fileListOld['card1'] = { name: tempFile.fileInfo.name, suffix: getFileSuffix(tempFile.fileInfo.url), url: tempFile.fileInfo.url }
            }
          },
          2: () => {
            this.deleteEvent('card2',{},1)
            const tempFile = tempFileDataArr[0] // fileInfo
            if (tempFile && tempFile.fileInfo && tempFile.fileInfo.url) {
              this.fileListOld['card2'] = { name: tempFile.fileInfo.name, suffix: getFileSuffix(tempFile.fileInfo.url), url: tempFile.fileInfo.url }
            }
          },
          3: () => {
            const tempArr = []
            tempFileDataArr.forEach((item,index) => {
              if (item && item.fileInfo && item.fileInfo.url) {
                tempArr.push({ name: item.fileInfo.name, suffix: getFileSuffix(item.fileInfo.url), url: item.fileInfo.url })
              }
            })
            this.fileListOld['card3'] = tempArr
          },
        },
        2: {
          3: () => {
            this.deleteEvent('card1',{},0)
            this.deleteEvent('card2',{},1)
            const tempFile = tempFileDataArr[0]
            const tempFile1 = tempFileDataArr[1]  // fileInfo
            if (tempFile && tempFile.fileInfo && tempFile.fileInfo.url) {
              this.fileListOld['card1'] = { name: tempFile.fileInfo.name, suffix: getFileSuffix(tempFile.fileInfo.url), url: tempFile.fileInfo.url }
            }
            if (tempFile1 && tempFile1.fileInfo && tempFile1.fileInfo.url) {
              this.fileListOld['card2'] = { name: tempFile1.fileInfo.name, suffix: getFileSuffix(tempFile1.fileInfo.url), url: tempFile1.fileInfo.url }
            }

          },
          4: () => {
            const [tempFile, ...tempFile1] = tempFileDataArr
            if (tempFile && tempFile.fileInfo && tempFile.fileInfo.url) {
              this.fileListOld['card1'] = { name: tempFile.fileInfo.name, suffix: getFileSuffix(tempFile.fileInfo.url), url: tempFile.fileInfo.url }
            }
            const tt = []
            tempFile1.forEach(item => {
              if (item && item.fileInfo && item.fileInfo.url) {
                tt.push({ name: item.fileInfo.name, suffix: getFileSuffix(item.fileInfo.url), url: item.fileInfo.url })
              }
            })
            this.fileListOld['card3'] = tt
          },
          5: () => {
            const [tempFile, ...tempFile1] = tempFileDataArr
            if (tempFile && tempFile.fileInfo && tempFile.fileInfo.url) {
              this.fileListOld['card2'] = { name: tempFile.fileInfo.name, suffix: getFileSuffix(tempFile.fileInfo.url), url: tempFile.fileInfo.url }
            }
            const tt = []
            tempFile1.forEach(item => {
              if (item && item.fileInfo && item.fileInfo.url) {
                tt.push({ name: item.fileInfo.name, suffix: getFileSuffix(item.fileInfo.url), url: item.fileInfo.url })
              }
            })
            this.fileListOld['card3'] = tt
          },
        },
        3: {
          6: () => {
            const [tempFile, tempFile2, ...tempFile1] = tempFileDataArr
            if (tempFile && tempFile.fileInfo && tempFile.fileInfo.url) {
              this.fileListOld['card1'] = { name: tempFile.fileInfo.name, suffix: getFileSuffix(tempFile.fileInfo.url), url: tempFile.fileInfo.url }
            }
            if (tempFile2 && tempFile2.fileInfo && tempFile2.fileInfo.url) {
              this.fileListOld['card2'] = { name: tempFile2.fileInfo.name, suffix: getFileSuffix(tempFile2.fileInfo.url), url: tempFile2.fileInfo.url }
            }
            const tt = []
            tempFile1.forEach(item => {
              if (item && item.fileInfo && item.fileInfo.url) {
                tt.push({ name: item.fileInfo.name, suffix: getFileSuffix(item.fileInfo.url), url: item.fileInfo.url })
              }
            })
            this.fileListOld['card3'] = tt
          }
        },
      }

      tempFun[tempCardNameList.length][eval(tempAtt.join('+'))]()


      this.addWatermark(config).then(res => {

        const { upLoadCardListConfig } = res
        const nameCountFun = {
          0: (nameList) => { },
          1: (nameList) => {
            const cardName = nameList.join('')
            let index = 0
            if (cardName == 'card1') {
              this.fileList1[cardName] = upLoadCardListConfig[index] && upLoadCardListConfig[index].fileInfo || {}
            }
            if (cardName == 'card2') {
              this.fileList1[cardName] = upLoadCardListConfig[index] && upLoadCardListConfig[index].fileInfo || {}
            }
            if (cardName == 'card3') {
              const tempArr = []
              upLoadCardListConfig.forEach(item => {
                if (item && item.fileInfo && item.fileInfo.url) {
                  tempArr.push(item.fileInfo)
                }
              })
              this.fileList1[cardName] = tempArr
            }
          },
          2: (nameList) => {
            const cardName = nameList.join('')
            if (upLoadCardListConfig.length > 1) {
              if (cardName.indexOf('card1') >= 0 || cardName.indexOf('card2') >= 0) {
                nameList.forEach((item, index) => {
                  this.fileList1[item] = upLoadCardListConfig[index].fileInfo
                  // this.fileListOld[item] = upLoadCardListConfig[index].fileInfo
                })
              }
              if (cardName.indexOf('card3') >= 0) {
                const tempArr = []
                upLoadCardListConfig.forEach((item, index) => {
                  if (index > 0) {
                    if (item && item.fileInfo && item.fileInfo.url) {
                      tempArr.push(item.fileInfo)
                    }
                  }
                })
                this.fileList1['card3'] = tempArr
              }
            } else {
              if (cardName.indexOf('card1') >= 0 || cardName.indexOf('card2') >= 0) {

                nameList.forEach((item, index) => {
                  this.fileList1[item] = upLoadCardListConfig[index] && upLoadCardListConfig[index].fileInfo
                })
              }
            }

          },
          3: (nameList) => {
            if (upLoadCardListConfig.length > 2) {
              const tempArr = []
              upLoadCardListConfig.forEach((item, index) => {
                if (index <= 1) {
                  this.fileList1['card' + (index + 1)] = item.fileInfo
                } else {
                  if (item && item.fileInfo && item.fileInfo.url) {
                    tempArr.push(item.fileInfo)
                  }
                }
              })
              this.fileList1['card3'] = tempArr
            } else {
              upLoadCardListConfig.forEach((item, index) => {
                this.fileList1['card' + (index + 1)] = item.fileInfo
              })
            }
          },
        }

        nameCountFun[tempCardNameList.length](tempCardNameList)
        tempCardNameList.forEach((cardName, index) => {
          const { fileInfo } = upLoadCardListConfig[index] || {}
          if (fileInfo && fileInfo.url && fileInfo.url.length > 0) {
            this.fileListLoading[cardName].card = true
          } else {
            this.fileListLoading[cardName].card = false
          }
        })
      })


    },
    deleteEvent(cardName, item, dataIndex) {
      // console.log('deleteEvent==>',cardName,item,this.$refs[cardName].sFileList);
      if (cardName === 'card3') {
        this.fileList1[cardName].splice(dataIndex, 1);
        this.fileListOld[cardName].splice(dataIndex, 1);
        this.$refs[cardName].sFileList.splice(dataIndex, 1);
      } else {
        this.fileList1[cardName] = {}
        this.fileListOld[cardName] = {}
        this.$refs[cardName].sFileList = []
      }
      this.fileListLoading[cardName].card = false
      // console.log('@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ 0',cardName,this.fileListLoading);
    },
    getFileListName(fileName) {
      const tempArr = fileName.split('/')
      return tempArr[tempArr.length - 1]
    },
    getShowCard(cardName) {
      const { multiple, isTwo, isThree = false, showCardList } = this.config_
      let res = false
      if (Object.prototype.toString.call(showCardList) === '[object Array]' && showCardList.length > 0) {
        if (showCardList.indexOf(cardName) >= 0) {
          res = true
        }
      } else {
        if (isThree === true) {
          res = true
        } else if (multiple === true) {
          if (cardName === 'card3') {
            res = true
          } else {
            res = false
          }
        } else {
          if (isTwo === true) {
            if (cardName === 'card1' || cardName === 'card2') {
              res = true
            } else {
              res = false
            }
          } else {
            if (cardName === 'card1') {
              res = true
            } else {
              res = false
            }
          }
        }
      }
      // console.log(cardName,res);
      // this.fileListLoading[cardName].card = res
      return res
    },

    picModalShow(picUrl, suffix, item) {
      if (suffix) {
        this.picModalConfig.picUrl = picUrl
        this.picModalConfig.suffix = suffix
        this.picModalConfig.name = this.getFileName(item.url)
        this.picModalConfig.visible = true
      } else {
        this.AddWatermark.addWatermark(picUrl).then(res => {
          this.picModalConfig.picUrl = res.url
          this.picModalConfig.suffix = res.suffix
          this.picModalConfig.name = this.getFileName(item.url)
          this.picModalConfig.visible = true
        })
      }
    },
    picModalClose() {
      this.picModalConfig.picUrl = ''
      this.picModalConfig.suffix = ''
      this.picModalConfig.visible = false
    },
    psEvent(type) {
      if (type == 'close') {
        this.picModalConfig.picUrl = ''
        this.picModalConfig.suffix = ''
        this.picModalConfig.visible = false
      }
    },
    beforeUploadEvent(cardName, file) {
      console.log('beforeUploadEvent ====>', cardName, file);
      return this.fileCheck(cardName, file)
    },
    fileCheck(cardName, file) {
      // console.log('文件类型校验  fileCheck ===>', cardName, file, file.type);
      let res = true
      this.fileListLoading[cardName].loading = true
      this.fileListLoading[cardName].card = true
      const fileType = this.config_.fielConfig.type
      const checkFileType_ = FileType.checkFileType(file, fileType, cardName)
      if (!checkFileType_.checkResult) {
        this.showErrMesg(cardName, checkFileType_.mesg)
        this.$nextTick(() => {
          setTimeout(() => {
            const size = this.$refs[cardName].sFileList.length
            this.$refs[cardName].sFileList.splice(size - 1, 1);
          }, 500);
        })
        res = false
      } else {
        this.hideErrMesg(cardName)
        res = true
      }
      if (res) {
        const currentFileSize = file.size / 1024 / 1024 // MB  singleFileSize
        const fileSize = this.config_.fielConfig.singleFileSize
        if (currentFileSize > fileSize) {
          this.showErrMesg(cardName, `当前文件大小限制在${fileSize}MB以内`)
          this.$nextTick(() => {
            setTimeout(() => {
              const size = this.$refs[cardName].sFileList.length
              this.$refs[cardName].sFileList.splice(size - 1, 1);
            }, 500);
          })
          res = false
        } else {
          this.hideErrMesg(cardName)
          res = true
        }
      }
      // 文件个数限制
      if (res) {
        let size = 0
        if (this.fileListOld.card1 && this.fileListOld.card1.url) {
          size++
        }
        if (this.fileListOld.card2 && this.fileListOld.card2.url) {
          size++
        }
        size = size + this.fileListOld.card3.length
        const fileCount = this.config_.fielConfig.size
        // const size = this.$refs[cardName].sFileList.length
        // console.log('文件个数检查====》',size > fileCount,size,fileCount);
        if (size >= fileCount) {
          this.showErrMesg(cardName, `只能上传${fileCount}个文件`)
          this.$nextTick(() => {
            setTimeout(() => {
              const size = this.$refs[cardName].sFileList.length
              this.$refs[cardName].sFileList.splice(size - 1, 1);
            }, 500);
          })
          res = false
        } else {
          this.hideErrMesg(cardName)
          res = true
        }
      }
      // console.log('文件校验==》',res,checkFileType_);
      this.uploadFileCheck[cardName] = res
      return res
    },
    showErrMesg(cardName, mesg) {
      this.$nextTick(()=>{
        this.cardTipsConfig.mesg = mesg
        this.cardTipsConfig.cardName = cardName
        this.cardTipsConfig.class = 'err-mesg animate__shakeX'
      })
    },
    hideErrMesg(cardName) {
      this.cardTipsConfig.mesg = ''
      this.cardTipsConfig.cardName = cardName
      this.cardTipsConfig.class = ''
    },
    async customRequestEvent(action, cardName) {
      const dir = this.config.dir
      const tempArr = []
      if (this.uploadFileCheck[cardName] === true) {
        const res1 = await customRequestNew(action, dir, this)
        tempArr.push(res1)
        if (Object.prototype.toString.call(this.fileList1[cardName]) === '[object Array]') {
          this.fileList1[cardName] = [...this.fileList1[cardName], res1]
          this.fileListOld[cardName] = [...this.fileListOld[cardName], res1]
        } else {
          this.fileList1[cardName] = res1
          this.fileListOld[cardName] = res1
        }
      }
    },
    /**
     * 获取校验结果  this.$refs[''].getDataCheckRes()
     */
    getDataCheckRes() {
      const { multiple, isTwo, showCardList } = this.config_
      let cardName = []
      if (multiple === true) {
        cardName.push('card3')
      } else {
        if (isTwo === true) {
          cardName.push('card1')
          cardName.push('card2')
        } else {
          cardName.push('card1')
        }
      }
      if (showCardList.length > 0) {
        cardName = showCardList
      }
      // uploadFileCheck
      const res = []
      // upLoadCardListConfig
      const tempTips = this.config_.upLoadCardListConfig
      // 检查强制文件个数校验
      if (this.config_.required === true) {


        // if (cardName.indexOf('card1') >= 0 && cardName.indexOf('card2') >= 0) {
        //   if (!this.fileList1['card2'].url) {
        //     this.showErrMesg('card2', `请上传 ${tempTips[1]&&tempTips[1].tips || '文件'}`)
        //     this.uploadFileCheck['card2'] = false
        //   } else {
        //     this.hideErrMesg('card2')
        //     this.uploadFileCheck['card2'] = true
        //   }
        //   if (!this.fileList1['card1'].url) {
        //     this.showErrMesg('card1',  `请上传 ${tempTips[0]&&tempTips[0].tips || '文件'}`)
        //     this.uploadFileCheck['card1'] = false
        //   } else {
        //     this.hideErrMesg('card1')
        //     this.uploadFileCheck['card1'] = true
        //   }

        // } else if (cardName.indexOf('card1') >= 0) {
        //   if (!this.fileList1['card1'].url) {
        //     this.showErrMesg('card1', `请上传 ${tempTips[0]&&tempTips[0].tips || '文件'}`)
        //     this.uploadFileCheck['card1'] = false
        //   } else {
        //     this.hideErrMesg('card1')
        //     this.uploadFileCheck['card1'] = true
        //   }
        // } else if (cardName.indexOf('card3') >= 0) {
        //   const fileCount = this.fileList1['card3'].length
        //   const tempFileCount = this.config_.fielConfig.size
        //   if (fileCount > tempFileCount || fileCount === 0) {
        //     this.showErrMesg('card3', `请上传文件`)
        //     this.uploadFileCheck['card3'] = false
        //   } else {
        //     this.hideErrMesg('card3')
        //     this.uploadFileCheck['card3'] = true
        //   }
        // }

        // 20230531 优化判断逻辑
        if(cardName.indexOf('card3') >= 0 ){
          const fileCount = this.fileList1['card3'].length
          const tempFileCount = this.config_.fielConfig.size
          if (fileCount > tempFileCount || fileCount === 0) {
            this.showErrMesg('card3', `请上传 ${tempTips[2]&&tempTips[2].tips || '文件'}`)
            this.uploadFileCheck['card3'] = false
          } else {
            this.hideErrMesg('card3')
            this.uploadFileCheck['card3'] = true
          }
        }
        if(cardName.indexOf('card2') >= 0 ){
          if (!this.fileList1['card2'].url) {
            this.showErrMesg('card2',  `请上传 ${tempTips[1]&&tempTips[1].tips || '文件'}`)
            this.uploadFileCheck['card2'] = false
          } else {
            this.hideErrMesg('card2')
            this.uploadFileCheck['card2'] = true
          }
        }

        if(cardName.indexOf('card1') >= 0 ){
          if (!this.fileList1['card1'].url) {
            this.showErrMesg('card1',  `请上传 ${tempTips[0]&&tempTips[0].tips || '文件'}`)
            this.uploadFileCheck['card1'] = false
          } else {
            this.hideErrMesg('card1')
            this.uploadFileCheck['card1'] = true
          }
        }



      }

      cardName.forEach(item => {
        res.push(this.uploadFileCheck[item])
      })
      // fileList1
      // console.log('校验结果===》', res,this.fileList2,this.uploadFileCheck);
      return res
    },
    /**
     * 获取表单需要的值
     */
    getData() {
      const res = []
      Object.keys(this.fileListOld).forEach(key => {
        if (key === 'card3') {
          if (this.fileListOld['card3'].length > 0) {
            this.fileListOld['card3'].forEach(item => {
              res.push({ ...item, name: this.getFileListName(item.name) })
            })
          }
        } else {
          if (this.fileListOld[key].url) {
            const item = this.fileListOld[key]
            res.push({ ...item, name: this.getFileListName(item.name) })
          }
        }
      })
      return res
    }
  }
}
</script>

<style lang="less">
.uploadFile-con {
  height: 300px;
  // width: 400px;
  width: 100%;
  // padding: 10px;
  // background-color: aqua;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  box-sizing: border-box;

  &.card1 {
    justify-content: center;
  }

  &.card2 {
    justify-content: center;
  }

  &.card3 {
    justify-content: flex-start;
  }

  // 、、 420 420 770

  &.min-w-c-1 {
    min-width: 420px;
    overflow: auto;
  }

  &.min-w-c-2 {
    min-width: 840px;
    overflow: auto;
  }

  &.min-w-c-3 {
    min-width: 1610px;
    overflow: auto;
  }

  &.min-w-c-4 {
    overflow: auto;
    min-width: 1190px;
  }

  .upload-card-con {

    height: 250px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: column;
    margin: 0 10px;

    .upload-card {
      width: 400px;
      height: 220px;
      border-radius: 8px;
      border: 1px solid #CDCDCD;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      position: relative;

      .upload {
        height: 100%;
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;

        .showPic {
          position: absolute;
          z-index: 1;
          width: 100%;
          height: 100%;
          border-radius: 10px;
          overflow: hidden;
          background-color: #fff;
          text-align: center;
          left: 0px;
          box-sizing: border-box;
          padding: 6px;
          display: flex;
          justify-content: center;
          align-items: center;

          // display: none;
          .delete {
            display: flex;
            width: 20px;
            height: 20px;
            position: absolute;
            right: 0px;
            top: 8px;
            cursor: pointer;
          }

          .showModel {
            width: 50%;
            height: 50%;
            position: absolute;
            right: 25%;
            top: 25%;
            cursor: pointer;
          }

          img {
            max-width: 100%;
            max-height: 100%;

          }
        }

        span {
          .ant-upload-list {
            display: none;
          }
        }
      }

      .upload-tips-con {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        position: absolute;
        bottom: 5px;
        left: 10px;
        height: 30px;
        width: 95%;
        line-height: 17px;
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #C2C2C2;
      }
    }

    .upload-card-list-con {
      width: 750px;
      // height: 100%;
      display: flex;
      justify-content: flex-start;
      align-items: center;

      .upload-card {
        flex: 1;
        height: 220px;
        border-radius: 8px;
        border: 1px solid #CDCDCD;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        position: relative;

        .upload {
          height: 100%;
          flex: 1;
          display: flex;
          justify-content: center;
          align-items: center;
          position: relative;

          .showPic {
            position: absolute;
            z-index: 1000;
            width: 100%;
            height: 100%;
          }
        }

        .upload-tips-con {
          display: flex;
          justify-content: center;
          align-items: center;
          flex-direction: column;
          position: absolute;
          bottom: 5px;
          left: 10px;
          height: 30px;
          width: 95%;
          line-height: 17px;
          font-size: 14px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #C2C2C2;
        }
      }

      .upload-card-list {
        margin-left: 10px;
        width: 300px;
        height: 220px;
        border-radius: 8px;
        border: 1px solid #CDCDCD;
        overflow: auto;
        padding: 10px;

        ul {
          list-style: none;
          padding-inline-start: 0;

          li {
            height: 40px;
            line-height: 40px;
            border-bottom: 1px solid #ccc;
            display: flex;
            align-items: center;

            .icon {
              display: flex;
              width: 20px;
              height: 20px;
              align-items: center;
              background: none;
            }

            .file-name {
              flex: 1;
              cursor: pointer;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
            }

            .file-action {
              width: 30px;
              height: 30px;
              display: flex;
              align-items: center;
              cursor: pointer;
            }
          }

          .not-data {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 180px;
            color: #C2C2C2;
          }
        }
      }

    }

    .upload-tips-con {
      height: 30px;
      width: 100%;
      line-height: 30px;
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #C2C2C2;
    }

    .upload-tips-con-hide {
      display: none;
    }

    .err-mesg {
      display: block;
      color: #f5222d;
      font-weight: 700;
    }
  }
  .iconfont{
    color: #2a5699; // #f5222d;
  }
  .icon-size {
    font-size: 100px;
  }

  .file-title-name {
    width: 100%;
    height: 25px;
    line-height: 16px;
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #2a5699;
    overflow: hidden;
    cursor: pointer;
    position: absolute;
    bottom: 0px;
    left: 0px;
    z-index: 10;
    background-color: #e5eaf987;
    padding: 5px 5px;
    text-decoration: underline;
    text-align: center;
  }

  .icon-excel {
    color: rgb(16, 124, 65);
  }

  .icon-zip {

    color: rgb(255, 210, 87);
  }

  .icon-pdf,
  .icon-ppt {
    color: rgb(222, 0, 17);
  }

  .icon-none {
    display: none;
  }


}</style>
